<template>
    <div class="transaction-item">
        <div class="transaction-item_head">
            <p class="transaction-item_head_title">{{options.day}} {{ $t('account.days') }}</p>
        </div>
        <div class="transaction-item_list l-f l-wrap l-column l-col-start l-col-stretch">
            <div class="transaction-item_list_item l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.amount')}}</p>
                <p class="transaction-item_list_item_value">${{numberFormat(options.money,4)}}</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.theTerm')}}</p>
                <p class="transaction-item_list_item_value">{{options.day}} {{$t('account.days')}}</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.rOI')}}</p>
                <p class="transaction-item_list_item_value">{{options.rate}}-{{options.rate_max}}%</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.totalRevenue')}}</p>
                <p class="transaction-item_list_item_value">{{options.ljShouyi}}</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.orderID')}}</p>
                <p class="transaction-item_list_item_value">{{options.id}}</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.creationTime')}}</p>
                <p class="transaction-item_list_item_value">{{options.created_at}}</p>
            </div>
             <div class="transaction-item_list_item  l-f l-row-sb">
                <p class="transaction-item_list_item_label">{{$t('account.expireDate')}}</p>
                <p class="transaction-item_list_item_value">{{options.complete_at}}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { numberFormat } from '@/utils/index.js'
defineProps({
    options: {
        type: Object,
        default: function() {
            return {}
        }
    }
})
</script>

<style lang="scss" scoped>
.transaction-item {
    background-color: #00000030;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    margin-bottom: 15px;
    &::before {
        content: "";
        display: block;
        background: linear-gradient(118.58deg, #d3b25b 21.42%, #f0d180 67.63%);
        opacity: .7;
        position: absolute;
        left: 0;
        border-radius: 2px;
        height: 24px;
        width: 4px;
    }
    &_head {
        padding-bottom: 15px;
        box-sizing: border-box;
        border-bottom: 1.5px solid rgba(184,184,184,.06);
        &_title {
            font-size: 14px;
            color: #ffffff;
        }
    }
    &_list {
        column-gap: 20px;
        max-height: 160px;
        &_item {
            margin: 8px 0;
            &_label {
                color: #ffffff;
                opacity: .3;
            }
            &_value {
                color: #ffffff;
                opacity: .8;
            }
        }
    }
}
@media only screen and (max-width: 1200px) {
    .transaction-item {
        background-color: #191934;
        &_list {
            max-height: none;
        }
    }
}
</style>